<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学习进度</title>
</head>
<body>
    <a href="/index" style="display:inline-block;margin:24px 0 0 24px;padding:6px 16px;background:#e6f0ff;color:#1677ff;border-radius:6px;text-decoration:none;font-weight:500;box-shadow:0 1px 4px #e0e7ff;">返回首页</a>
    <h2>学习进度页面</h2>
    <div id="progress-list">
        <table th:if="${progressList != null}" style="width:100%;margin-top:24px;box-shadow:0 2px 8px #f0f1f2;border-radius:8px;overflow:hidden;">
            <thead style="background:#f5f5f5;">
                <tr>
                    <th style="padding:12px;">课程封面</th>
                    <th style="padding:12px;">课程名称</th>
                    <th style="padding:12px;">进度</th>
                    <th style="padding:12px;">最后学习内容</th>
                    <th style="padding:12px;">最近访问</th>
                    <th style="padding:12px;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="progress : ${progressList}" style="background:#fff;">
                    <td style="text-align:center;">
                        <img th:src="@{'/images/' + ${progress.course.thumbnail}}" alt="封面" style="width:80px;height:60px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px #eee;">
                    </td>
                    <td th:text="${progress.course.title}" style="font-weight:600;"></td>
                    <td style="min-width:120px;">
                        <div style="background:#f0f1f2;border-radius:8px;overflow:hidden;height:18px;width:100px;">
                            <div th:style="'background:#52c41a;height:18px;border-radius:8px;width:' + ${progress.progressPercentage} + '%;'" style="transition:width 0.5s;"></div>
                        </div>
                        <span th:text="${progress.progressPercentage + '%'}" style="font-size:12px;color:#888;margin-left:8px;"></span>
                    </td>
                    <td th:text="${progress.lastContent != null ? progress.lastContent.title : '无'}"></td>
                    <td th:text="${progress.lastAccessedAt != null ? #temporals.format(progress.lastAccessedAt, 'yyyy-MM-dd HH:mm') : '无'}"></td>
                    <td>
                        <a th:href="@{'/courses/' + ${progress.course.id}}" class="btn-study" style="background:#1677ff;color:#fff;padding:6px 16px;border-radius:4px;text-decoration:none;">继续学习</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div th:if="${progressList == null || #lists.isEmpty(progressList)}" style="text-align:center;color:#888;margin-top:48px;">
            暂无学习进度，快去开始你的第一门课程吧！
        </div>
    </div>
</body>
</html> 